<template>
  <button
    :class="['icon-button', type]"
    :disabled="disabled"
    @click="$emit('click', $event)"
  >
    <span v-if="icon" :class="['icon', icon]" />
    <slot />
  </button>
</template>

<script>
export default {
  name: 'IconButton',
  props: {
    icon: {
      type: String,
      default: '', // 传入 icon 的 class 名称
    },
    type: {
      type: String,
      default: 'default', // 可选: default, primary, danger
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
}
</script>

<style scoped>
.icon-button {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  background: #f5f5f5;
  color: #333;
  transition: background 0.2s;
}
.icon-button.primary {
  background: #409eff;
  color: #fff;
}
.icon-button.danger {
  background: #f56c6c;
  color: #fff;
}
.icon-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.icon {
  margin-right: 8px;
  font-size: 18px;
}
</style> 